<template>
  <div class="container">
    <div class="title">设备分类</div>
    <div ref="bar" id="main3" style="width: 99%; height: 89%" v-show="barData.length > 0"></div>
    <div v-if="barData.length <= 0" class="no-warn-info">
      <img :src="wugj" />
      <div>暂无设备</div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapState } from "vuex";
import { reqDeviceType } from "@api/apiDatav.js";

export default {
  props: {},
  data() {
    return {
      wugj: require("@assets/images/datav/wugj.png"),
      barData: [],
      option: {
        color: ['#52DDFB','#FF8DD2', '#6BA7FF',  '#A9F9FF', '#FFC32A', '#A87EFF', '#FFEF83', '#00FEC4', '#F3FFD0'],
        //中间显示文字
        title: {
          text: "总数",   //主标题
          top: '41%',
          left: '29%',
          subtext: '100',   //副标题
          textAlign: 'center', // 设置标题居中
          textStyle: {    //标题样式
            fontSize: 15,
            fontWeight: "bolder",
            color: "#fff",
          },
          subtextStyle: {   //副标题样式
            fontSize: 20,
            fontWeight: "bolder",
            color: "#fff",
            formatter: '',
            lineHeight: 13,
          },
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll', // 设置图例为滚动类型
          orient: 'horizontal', // 横向显示图例
          height: '90%', // 设置图例高度
          pageIconColor: '#00EDFE', // 设置翻页箭头颜色
          pageTextStyle: {
            color: '#FFFFFF' // 设置翻页数字颜色
          },
          pageIconSize: 11, // 设置翻页箭头大小
          textStyle: { // 设置图例文字的样式
            color: '#FFFFFF',
            fontSize: 12,
            lineHeight: 17,//行高
          },
          itemHeight: 10, // 设置图例项的高度
          itemWidth: 15, // 设置图例项的宽度
          orient: 'vertical', // 设置图例为垂直方向
          right: '3%', // 设置图例距离容器右侧的距离为0，即紧贴着右侧
          top: 'center', // 设置图例距离容器顶部的距离为5%
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ["50%", "65%"], //饼图占位置比例
            center: ["30%", "50%"], //整个饼图在整个父元素中的位置
            avoidLabelOverlap: false, //是否启用防止标签重叠策略
            hoverAnimation: false,  //是否开启 hover 在扇区上的放大动画效果。
            // minAngle: 15,//最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
            // startAngle: 270, //起始角度 调整生长方向，防止文字被边界遮挡
            label: {
              show: false,//引导线文字
              position: 'center'
            },
            labelLine: {
              show: false//引导线
            },
            data: []
          }
        ],
      },
    };
  },
  computed: {
    ...mapState(["user", "datav","spacesManage"]),
  },
  async mounted() { },
  beforeDestroy() { },
  methods: {
    // 产品类型
    async DeviceType() {
      this.barData = []
      let res = await reqDeviceType({
        tenantId: this.user.tenantId,
        orgId:this.spacesManage.organizationInfo.orgId,
        spaceId: this.datav.buildingsArr.id,
        roleName:this.user.roleName,
        userId:this.user.userId,
      });
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);

      // 检查数据是否为空，如果为空则清空图表数据
      if (res.data.row && res.data.row.length === 0) {
        this.option.series[0].data = []; // 清空图表数据
        this.$nextTick(() => {
          var myChart = echarts.init(document.getElementById('main3'));
          myChart.dispose();//清除 ECharts 实例
        })
      } else {
        // 如果有数据，则更新图表数据
        this.barData = res.data.row || [];
        var subtext = 0//总数
        this.option.series[0].data = res.data.row.map(item => {
          subtext += item.count;
          if (item.deviceType == "GasSensor") {
            item.productName = '燃气'
          } else if (item.deviceType == "Infrared") {
            item.productName = '红外'
          } else if (item.deviceType == "SmokeAlarm") {
            item.productName = '烟感'
          } else if (item.deviceType == "TemperatureAlarm") {
            item.productName = '温感'
          } else if (item.deviceType == "WaterSensor") {
            item.productName = '水浸'
          }
          return { value: item.count, name: item.productName }
        });
        this.option.title.subtext = subtext
        // 图例
        this.option.legend = {
          type: 'scroll', // 设置图例为滚动类型
          orient: 'horizontal', // 横向显示图例
          height: '90%', // 设置图例高度
          pageIconColor: '#00EDFE', // 设置翻页箭头颜色
          pageTextStyle: {
            color: '#FFFFFF' // 设置翻页数字颜色
          },
          pageIconSize: 11, // 设置翻页箭头大小
          textStyle: { // 设置图例文字的样式
            color: '#FFFFFF',
            fontSize: 12,
            lineHeight: 17,//行高
          },
          itemHeight: 10, // 设置图例项的高度
          itemWidth: 15, // 设置图例项的宽度
          orient: 'vertical', // 设置图例为垂直方向
          right: '3%', // 设置图例距离容器右侧的距离为0，即紧贴着右侧
          top: 'center', // 设置图例距离容器顶部的距离为5%
          formatter: name => {
            var count = "";
            for (var i = 0; i < this.option.series[0].data.length; i++) {
              if (this.option.series[0].data[i].name == name) {
                count = this.option.series[0].data[i].value;
              }
            }
            return name + '    ' + count + '    ' + Math.round(((count / subtext) * 100)) + '%';
          }
        }
        this.$nextTick(() => {
          this.getCahrt();
        })
      }
    },
    getCahrt() {
      var chartDom = document.getElementById("main3");
      var deviceType = echarts.init(chartDom); // 基于准备好的dom，初始化echarts实例
      let listener = function () {
        deviceType.resize();
      };
      window.addEventListener("resize", listener);
      this.option && deviceType.setOption(this.option, true); // 使用指定的配置项和数据显示图表。
    },
  },
};
</script>

<style lang='less' scoped>
.fontSize (@px, @attr: font-size) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.lineHeight (@px, @attr: line-height) {
  @vh: (@px / 1080) * 100;
  @{attr}:~"@{vh}vh";
}

.width (@px, @attr: width) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.height (@px, @attr: height) {
  @vh: (@px / 1080) * 100;
  @{attr}:~"@{vh}vh";
}

.top (@px, @attr: top) {
  @vh: (@px / 1080) * 100;
  @{attr}:~"@{vh}vh";
}

.left (@px, @attr: left) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.right (@px, @attr: right) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.marginTop (@px, @attr: margin-top) {
  @vh: (@px / 1080) * 100;
  @{attr}:~"@{vh}vh";
}

.marginBottom (@px, @attr: margin-bottom) {
  @vh: (@px / 1080) * 100;
  @{attr}:~"@{vh}vh";
}

.marginLeft (@px, @attr: margin-left) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.marginRight (@px, @attr: margin-right) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.container {
  height: 100%;
  width: 100%;

  .title {
    .height(43);
    width: 58%;
    margin: 0 auto;
    .fontSize(16);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("../../../assets/images/datav/head.png") no-repeat;
    background-size: 100% 100%;
    font-weight: 600;
  }
}

::v-deep .el-progress__text {
  font-size: 17px !important;
}

.progress {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 66%;
}

.no-warn-info {
  width: 100%;
  height: 75%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: center;
  margin-top: 1.5%;
  color: #fff;
  font-size: 0.7vw;

  >img {
    width: 120px;
    height: 120px;
    margin-bottom: 10px;
  }
}
</style>